<template>
	<view>
		<scroll-view class="navGroup" scroll-x="true" show-scrollbar="false">
			<view v-for="(item, index) in list" :key="item.pic" class="navGroupItemWrap">
				<view class="navGroupItem" @tap="navigateTo(item.entrance)">
					<image :src="item.pic" class="navGroupItemImg" />
					<text class="navGroupItemText" >{{item.name}}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {parsePath, extractParams} from '../utils/index.js'
	import {mapMutations} from 'vuex'
	export default {
		props: ['list'],
		data() {
			return {

			};
		},
		methods: {
			...mapMutations(['setCategoryId']),
			navigateTo(entrance) {
				const url = parsePath(entrance)
				const params = extractParams(url)
				console.log('img-group---', url)
				if (url.includes('category')) {
					this.setCategoryId(params.catalogId)
					// getApp().globalData.categoryId = params.catalogId
					uni.switchTab({
						url
					})
				} else {
					uni.navigateTo({url})
				}
			}
		}
	}
</script>

<style>
	.navGroup {
		display: flex;
		flex-direction: row;
		background-color: #fff;
		/* #ifdef H5 || MP-WEIXIN */
		width: 100%;
		white-space: nowrap;
		/* #endif */
		
	}
	
	.navGroupItemWrap {
		/* #ifdef H5 || MP-WEIXIN */
		display: inline-block;
		width: 20%;
		/* #endif */
		/* #ifdef APP-PLUS */
		width: 150rpx;
		/* #endif */
	}

	.navGroupItem {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.navGroupItemText {
		display: inline-block;
		font-size: 22rpx;
		margin-top: 10rpx;
	}

	.navGroupItemImg {
		width: 100rpx;
		height: 100rpx;
		margin-top: 10rpx;
	}
</style>
